<template>
  <div>
    <div style="display: flex">
      <a-button type="primary" @click="save" style="margin-left: 2px">
        保存
      </a-button>
      <attributeModel
        v-model:note="formData.note"
        v-model:dictId="formData.dictId"
        v-model:name="formData.name"
        v-if="attributeFlag"
      ></attributeModel>
    </div>

    <a-tabs
      type="card"
      style="margin-top: 15px"
      @change="timerKey = new Date().toLocaleString()"
    >
      <a-tab-pane key="1" tab="数据源">
        <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 14 }">
          <a-form-item label="类型">
            <a-radio-group v-model:value="setting.options.resource">
              <a-radio value="1">TSQ语句</a-radio>
              <a-radio value="2">系统数据</a-radio>
              <a-radio value="3">静态数据</a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-show="setting.options.resource == '1'">
            <!-- TSQ语句 -->
            <a-form-item label="数据库">
              <a-select
                v-model:value="setting.options.dbId"
                placeholder="请选择"
              >
                <a-select-option
                  v-for="(item, index) in linkDbData"
                  :key="index"
                  :value="item.id"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="SQL">
              <a-textarea
                :rows="5"
                v-model:value="setting.options.sql"
                placeholder="请输入sql语句"
              />
            </a-form-item>
          </div>
          <!-- 系统数据 -->
          <a-form-item label="请选择" v-show="setting.options.resource == '2'">
            <a-select
              v-model:value="setting.options.region"
              placeholder="请选择方法"
            ></a-select>
          </a-form-item>
          <!-- 静态数据 -->
          <a-form-item label="数据" v-show="setting.options.resource == '3'">
            <a-textarea
              :rows="5"
              v-model:value="setting.options.stateData"
              placeholder="请输入静态数据"
            />
          </a-form-item>
          <a-form-item
            :wrapper-col="{ span: 14, offset: 3 }"
            v-show="setting.options.resource == '1'"
          >
            <a-button @click="selectSQL">查询数据</a-button>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="参数编辑">
        <a-form>
          <a-form-item
            class="mb-1"
            label="栅格间隔"
            :labelCol="{ span: 2, offset: 1 }"
          >
            <a-input-number
              style="width: 200px"
              v-model:value="dataC.options.gutter"
            ></a-input-number>
          </a-form-item>
          <a-form-item
            class="mb-1"
            label="边角"
            :labelCol="{ span: 2, offset: 1 }"
          >
            <a-input-number
              style="width: 200px"
              v-model:value="dataC.options.brRadious"
            ></a-input-number>
          </a-form-item>

          <a-form-item
            label="设置"
            :labelCol="{ span: 3, offset: 0 }"
            :wrapper-col="{ span: 14 }"
          >
            <draggable
              :list="dataC.options.columns"
              v-bind="{
                animation: 200,
                group: { name: 'options' },
                ghostClass: 'ghost',
                handle: '.drag-item',
              }"
              handle=".drag-item"
              itemKey="index"
            >
              <template #item="{ element, index }">
                <li
                  class="mb-1"
                  :key="index"
                  style="
                    display: flex;
                    border-bottom: 1px solid #b6c2c9;
                    padding-bottom: 10px;
                    align-items: center;
                  "
                >
                  <div style="position: relative">
                    <a-row>
                      <a-col :span="6">
                        背景色
                        <a-select
                          v-model:value="element.bgColor"
                          style="width: 90px"
                          placeholder="背景颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
                      </a-col>
                      <a-col :span="6">
                        列宽度
                        <a-input-number
                          placeholder="列宽"
                          style="width: 90px"
                          :max="24"
                          :min="0"
                          v-model:value="element.span"
                        ></a-input-number>
                      </a-col>
                      <a-col :span="6">
                        偏移量
                        <a-input-number
                          placeholder="偏移"
                          style="width: 90px"
                          :max="24"
                          :min="0"
                          v-model:value="element.offset"
                        ></a-input-number>
                      </a-col>
                      <a-col :span="6">
                        图标样式
                        <a-input
                          placeholder="图标"
                          style="width: 90px"
                          v-model:value="element.icon"
                        ></a-input>
                      </a-col>
                      <a-col :span="6">
                        数据源
                        <a-select
                          v-model:value="element.dataResource"
                          style="width: 90px"
                          @change="handleChange(element.dataResource, index)"
                          placeholder="数据源"
                        >
                          <a-select-option value="before">
                            静态数据
                          </a-select-option>
                          <a-select-option value="later">
                            后端数据
                          </a-select-option>
                        </a-select>
                      </a-col>

                      <a-col :span="6">
                        头部文字
                        <span v-show="element.dataResource == 'before'">
                          <a-input
                            placeholder="第一文字"
                            style="width: 90px"
                            v-model:value="element.topTitle"
                          ></a-input>
                        </span>
                        <span v-show="element.dataResource == 'later'">
                          <a-select
                            v-model:value="element.topTitle"
                            style="width: 90px"
                            placeholder="第一文字"
                          >
                            <a-select-option
                              :value="item"
                              v-for="(item, idx) in fakeData"
                              :key="idx"
                            >
                              {{ item }}
                            </a-select-option>
                          </a-select>
                        </span>
                      </a-col>

                      <a-col :span="6">
                        主体文字
                        <span v-show="element.dataResource == 'before'">
                          <a-input
                            placeholder="第二文字"
                            style="width: 90px"
                            v-model:value="element.middleTitle"
                          ></a-input>
                        </span>
                        <span v-show="element.dataResource == 'later'">
                          <a-select
                            v-model:value="element.middleTitle"
                            style="width: 90px"
                            placeholder="第二文字"
                          >
                            <a-select-option
                              :value="item"
                              v-for="item in fakeData"
                              :key="item"
                            >
                              {{ item }}
                            </a-select-option>
                          </a-select>
                        </span>
                      </a-col>
                      <a-col :span="6">
                        提示文字
                        <span v-show="element.dataResource == 'before'">
                          <a-input
                            placeholder="第三文字"
                            style="width: 90px"
                            v-model:value="element.bottomTitle"
                          ></a-input>
                        </span>
                        <span v-show="element.dataResource == 'later'">
                          <a-select
                            v-model:value="element.bottomTitle"
                            style="width: 90px"
                            placeholder="第三文字"
                          >
                            <a-select-option
                              :value="item"
                              v-for="item in fakeData"
                              :key="item"
                            >
                              {{ item }}
                            </a-select-option>
                          </a-select>
                        </span>
                      </a-col>
                    </a-row>
                    <div style="position: absolute; right: -60px; top: 0px">
                      <i
                        class="drag-item"
                        style="font-size: 16px; margin: 0 5px; cursor: move"
                      >
                        <a-button circle plain size="small">
                          <template #icon><UnorderedListOutlined /></template>
                        </a-button>
                      </i>
                      <a-button
                        @click="handleOptionsRemove(index)"
                        circle
                        size="small"
                        plain
                        style="margin-left: 5px"
                      >
                        <template #icon><MinusOutlined /></template>
                      </a-button>
                    </div>
                  </div>
                </li>
              </template>
            </draggable>
            <div style="margin-left: 2px">
              <a-button @click="handleAddColumn" type="primary">
                增加一列
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="3" tab="预览">
        <FtagGroup
          :setting="setting"
          :viewData="viewData"
          :key="timerKey"
        ></FtagGroup>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { FtagGroup } from '@/mycomponents/dataComponent/index'
  import { Get, Update } from '@/api/component/api'
  import { Gets } from '@/api/databaselink/api'
  import { Getsqlcolumns } from '@/api/report/api'
  import Draggable from 'vuedraggable'
  import { MinusOutlined, UnorderedListOutlined } from '@ant-design/icons-vue'
  import attributeModel from './attributeModel'
  export default {
    components: {
      FtagGroup,
      Draggable,
      MinusOutlined,
      UnorderedListOutlined,
      attributeModel,
    },
    props: ['selectId'],
    watch: {
      selectId(val) {
        this.getData(val)
      },
    },
    data() {
      return {
        setting: {
          options: {
            resource: '1',
          },
        },
        linkDbData: [],
        dataC: null,
        linktableData: [],
        fromtableFiledData: [],
        componentSettingVisible: false,
        widgetconfigKey: '',
        selectIndex: '',
        //modalkey: '',
        fakeData: ['请获取数据', '请获取数据', '请获取数据'], //参数编辑文字的数据
        viewData: null, //预览界面的数据
        timerKey: 1,
        attributeShow: false,
        formData: {},
        attributeFlag: false,
      }
    },
    created() {
      Gets().then((res) => {
        if (res.isSuccess) {
          this.linkDbData = res.content.items
        }
      })
      this.getData(this.selectId)
      console.log('this.dataC', this.setting)

      setTimeout(() => {
        //dataC此时为null，还未进行更改
        Getsqlcolumns({
          DbId: this.dataC.options.dbId,
          Sql: this.dataC.options.sql,
          isdata: true,
        }).then((res) => {
          if (res.isSuccess) {
            this.fakeData = res.content.items
            if (res.content.data.length > 0) {
              this.viewData = res.content.data[0]
            } else {
              return this.$message.error('数据为空')
            }
          } else {
            this.$message.error('数据请求失败！')
          }
        })
      }, 500)
    },

    methods: {
      getData(val) {
        Get({ id: val }).then((res) => {
          //console.log('resss',res)
          if (res.isSuccess) {
            this.formData = {
              name: res.content.name,
              componentType: res.content.componentType,
              dictId: res.content.dictId,
              note: res.content.note,
            }
            this.setting = JSON.parse(res.content.json)
            this.dataC = this.setting
            this.attributeFlag = true
            //console.log('this.setting', this.setting)
          }
        })
      },
      save() {
        var data = {
          name: this.formData.name,
          componentType: this.formData.componentType,
          dictId: this.formData.dictId,
          Json: JSON.stringify(this.setting).toString(),
          note: this.formData.note,
        }
        //console.log(typeof JSON.stringify(this.setting))
        console.log('发送的数据', data)
        Update({ id: this.selectId }, data).then((res) => {
          if (res.isSuccess) {
            this.$message.success('配置保存成功！', 2.5)
          } else {
            this.$message.error(res.message)
          }
        })
      },
      selectSQL() {
        var that = this
        // console.log('-=-=-=-=-=-',that.dataC.options.dbId,that.dataC.options.sql)
        Getsqlcolumns({
          DbId: that.dataC.options.dbId,
          Sql: that.dataC.options.sql,
          isdata: true,
        }).then((res) => {
          if (res.isSuccess) {
            this.$message.success('参数返回成功，请至参数编辑进行设置')
            console.log('res', res)
            this.fakeData = res.content.items
            if (res.content.data.length > 0) {
              this.viewData = res.content.data[0]
            } else {
              return this.$message.error('数据为空')
            }
          } else {
            this.$message.error('sql语句语法错误' + res.message)
          }
        })
      },
      handleAddColumn() {
        this.dataC.options.columns.push({
          span: 12,
          list: [],
          bgColor: '#32A932',
          topTitle: '32A932',
          middleTitle: '32A932',
          bottomTitle: '32A932',
          icon: 'apps-line',
          dataResource: 'before',
        })
      },
      handleOptionsRemove(index) {
        if (this.dataC.type === 'grid' || this.dataC.type === 'tagGroup') {
          this.dataC.options.columns.splice(index, 1)
        } else {
          this.dataC.options.options.splice(index, 1)
        }
      },
      handleChange(value, index) {
        //选择框点击数据源改动事件
        if (value == 'later') {
          //选择后端数据清空
          this.dataC.options.columns[index].topTitle = ''
          this.dataC.options.columns[index].middleTitle = ''
          this.dataC.options.columns[index].bottomTitle = ''
          //console.log('this.dataC.options.columns',this.dataC.options.columns,'-----',index,'-----')
        }
      },
    },
  }
</script>
